<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <u-empty
        :text="`${subject}为空~~`"
        v-if="pageList == null || pageList.length == 0"
      />
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          v-on:click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          v-for="item of pageList"
          :key="item.id"
        >
          <text class="item-title">{{
            item[itemName] == null ? "通用" : item[itemName]
          }}</text>
          <text
            v-on:click.stop="delStore($event, item.id)"
            style="color: #f56c6c"
            >删除</text
          >
        </view>
        <!-- <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          v-on:loadmore="onReachBottomEvent"
        /> -->
      </view>
    </view>

    <u-popup :show="show" @close="close" @open="open" :closeable="true">
      <view
        class="layout"
        style="
          height: 90vh;
          width: 100vw;
          background-color: #f7f8fa;
          font-size: 12px;
          padding-top: 60px;
          padding-right: 10px;
        "
      >
        <block v-if="popPageList != null && popPageList.length > 0">
          <view
            v-for="(item, index) in popPageList"
            :key="item.id"
            style="display: flex; align-items: center; margin-bottom: 10px"
          >
            <view style="flex: 1; font-weight: 900; padding-left: 12px">
              {{ item.storeName }}
            </view>
            <button
              size="mini"
              @click="btnPopItemSelectClick(item)"
              class="btn-yellow"
              style="border-radius: 8px; color: #fff"
              :style="{
                'background-color': pageList.some(
                  (itm) => itm.storeId == item.id
                )
                  ? '#f56c6c'
                  : '#24c322',
              }"
            >
              {{
                pageList.some((itm) => itm.storeId == item.id) ? "取消" : "选择"
              }}
            </button>
          </view>
        </block>
        <li-empty v-else />
      </view>
    </u-popup>

    <view class="bottom-add" v-on:click="btnAddStore">关联门店</view>
  </view>
</template>

<script>
import {
  uShowLoading,
  uHideLoading,
  utoast,
  uNavigateBack,
  uNavigateTo,
  uSwitchTab,
  uSetNavigationBarTitle,
  umodal,
} from "@/utils/uniUtils.js";
import {
  GetStoreOrganizationList,
  DelStoreOrganizationById,
  AddStoreOrganization,
  GetStoreList,
  DoBatchCreateStore,
} from "@/common/modules/business.js";
import { toastIconEnum } from "@/constants/uiConstants.js";
import { storeId } from "@/constants/apiConstants";
import liListMixin from "@/mixins/liListMixin";

export default {
  mixins: [liListMixin],
  data() {
    return {
      show: false,
      popPageList: [],
      id: null,
      itemName: "storeName", // pageList 每一项的标题
      subject: "关联门店", // 主题
      activeStyle: {
        color: "#F3C45D",
      },
      tabMenusIdx: 0, // tab的下标
      tabMenus: null, // 上tab
      leftMenus: null, // 左tab
      leftMenusIdx: null, // 左tab
      pageList: [], // 内容列表
      rootRoute: "workbench",
      routeName: "institution",
      isLoaded: false, //  控制页面是否显示
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "上拉加载更多~~",
      nomoreText: "实在没有了",
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },
  onLoad(options) {
    this.id = options.id;
  },
  async mounted() {
    try {
      uShowLoading();
      await this.GetPageList();
      this.isLoaded = true;
    } catch (error) {
      console.log("err", error);
      utoast("初始化失败！", "error");
      setTimeout(() => {
        uSwitchTab("/pages/tabBar/staging");
      }, 800);
    } finally {
      uHideLoading();
    }
  },
  methods: {
    onReachBottomEvent() {
      this.reachBtm(this);
    },

    async onTabClick(e) {
      this.onTabClickEvent(e, this);
    },

    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      //   if (this.tabMenus[idx] != null) {
      /*      if (this.showLoadMore) {
        this.pageNum += 1;
      }
      this.loadStatus = "loading"; */

      let {
        data: { list, total },
      } = await GetStoreOrganizationList({
        pageNum: 1,
        pageSize: 9999,
        organizationId: this.id,
        // storeId: storeId,
      });
      this.pageList = list;
      /*       this.pageList = [...this.pageList, ...list];
      this.total = total;
      if (this.pageList.length == this.total) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "loadmore";
      }
      this.showLoadMore = false; */
      // console.log("tagList", list);
      //   }
    },

    async btnAddClick() {
      this.btnAddClickEvent(this);
    },

    onItemClick(item) {
      //   this.onItemClickEvent(item, this);
    },

    async delStore(e, id) {
      e.stopPropagation();
      const res = await umodal();
      if (!res) {
        return;
      }
      const result = await DelStoreOrganizationById(id);
      if (result.code != null && result.code == 0) {
        await utoast("删除成功！", toastIconEnum.success);
        this.pageNum = 1;
        this.pageList = [];
        await this.GetPageList();
      } else {
        await utoast("删除失败！", toastIconEnum.error);
      }
    },
    btnAddStore: async function () {
      this.open();
    },
    close: function () {
      this.show = false;
    },
    open: async function () {
      this.show = !false;
      this.popPageList = (
        await GetStoreList({
          organizationId: this.id,
        })
      ).data.list;
    },
    btnPopItemSelectClick: async function (item) {
      const isExist = this.pageList.some((itm) => itm.storeId == item.id);
      switch (isExist) {
        case true:
          await DelStoreOrganizationById(item.id);
          break;
        case false:
          const jsonData = { id: [item.id], data: this.id };
          await DoBatchCreateStore(jsonData);
          break;
        default:
          break;
      }
      this.open();
      await this.GetPageList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/static/styles/commonStyle.scss";
.container {
  height: 100.1vh;
}
</style>
